<template>
    <div>
      <el-container>
        <el-aside width="200px"></el-aside>

        <el-main>
          <!--页面内容-->

            <!--<h2>创建的歌单</h2>-->
          <el-container style="height: 500px; border: 1px solid #eee">


            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
              <el-menu :default-openeds="['1', '4']">
                <el-submenu index="1">
                  <template slot="title"><i class="el-icon-headset"></i>我喜欢的歌曲</template>
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title"><i class="el-icon-headset"></i>游戏</template>

                </el-submenu>
                <el-submenu index="3">
                  <template slot="title"><i class="el-icon-headset"></i>情感</template>
                </el-submenu>
                <el-submenu index="4">
                  <template slot="title"><i class="el-icon-headset"></i>运动</template>
                </el-submenu>
              </el-menu>
            </el-aside>

            <el-container>
            <!--  <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                  <i class="el-icon-setting" style="margin-right: 15px"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>查看</el-dropdown-item>
                    <el-dropdown-item>新增</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span>数据</span>
              </el-header>-->

              <el-main>
                <el-row>
                  <el-col :span="2">
                    <img src="http://qhwykybp2.hd-bkt.clouddn.com/002.jpg" style="width: 200px" height="200px">
                  </el-col>
                  <el-row>
                    <span style="float:left;margin-left: 140px;color: red;font-size: 18px"><!--<i class="el-icon-s-unfold"></i>-->歌单:</span>
                    <span style="float: left;margin-left: 10px;font-size: 18px">我喜欢的歌曲</span>
                    <br><br>
                    <el-col :span="2">
                      <img src="http://qhwykybp2.hd-bkt.clouddn.com/003.jpg" style="width: 50px;margin-left: 150px" height="50px">
                    </el-col>
                    <el-row>
                      <span style="float:left;margin-left: 140px;color: red;font-size: 20px">name:创建</span>
                      <span style="float:left;margin-left: 10px;font-size: 20px">时间</span>
                      <br><br>
                      <br><br>

                      <el-row>
                        <el-button style="margin-left: 200px">播放</el-button>
                        <el-button>分享</el-button>
                        <el-button>收藏</el-button>
                        <el-button>评论</el-button>
                      </el-row>


                  <!--    <button style="float: left;margin-left: 150px">播放</button>&nbsp;&nbsp;&nbsp;&nbsp;
                      <button style="float: left">分享</button>&nbsp;&nbsp;&nbsp;&nbsp;
                      <button style="float: left">收藏</button>&nbsp;&nbsp;&nbsp;&nbsp;
                      <button style="float: left">评论</button>&nbsp;&nbsp;&nbsp;&nbsp;-->

                    </el-row>
                  </el-row>
                </el-row>


                <el-table :data="tableData">
                  <el-table-column prop="index" label="序号" width="60">
                  </el-table-column>
                  <el-table-column prop="name" label="歌名" width="160">
                  </el-table-column>
                  <el-table-column prop="musicer" label="歌手" width="100">
                  </el-table-column>
                  <el-table-column prop="zhuanji" label="专辑" width="160">
                  </el-table-column>
                  <el-table-column prop="url" label="播放">
                    <template slot-scope="scope">
                      <div v-html="bofang1">
                      </div>
                    </template>
                  </el-table-column>


                </el-table>

              </el-main>
            </el-container>
          </el-container>



        </el-main>

        <el-aside width="200px"></el-aside>

      </el-container>




    </div>
</template>

<script>
    export default {
        name: "show.vue",
        data() {
        const item = {
          index: '1',
          name: '姜子牙',
          musicer: '张杰',
          zhuanji: '姜子牙',
          url:'http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3',
        };
        return{
          tableData: Array(3).fill(item),
          bofang1: '<audio  style="width: 300px" src="http://qhzc8uz64.hd-bkt.clouddn.com/%E8%BE%BE%E6%8B%89%E5%B4%A9%E5%90%A7%EF%BC%88Cover%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C%EF%BC%89.mp3" controls></audio>',
        }

      },
    }
</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
